<template>
  <div>
    <div
      v-show="showChart"
      :id="'containerColumn_'+idIndex"
    ></div>
    <div
      class="rowFlex allCenter"
      :style="{justifyContent: 'center', height: !showChart ? '200px' : '1px',width: '100%'}"
    >
      <h1 v-if="!showChart">暂无数据</h1>
    </div>
  </div>
</template>

<script>
import { DualAxes, Pie } from '@antv/g2plot'
import { numberFormatThousandthPercentile, numFormat } from '@/utils/index'
import { max, min } from 'moment'
export default {
  props: ['chartData', 'idIndex', 'viewType'],
  data() {
    return {
      lineChart: null,
      showChart: true,
      totalNum: 0
    }
  },
  watch: {
    chartData(newVal, oldVal) {
      this.totalNum = 0
      if (newVal.length > 0) {
        this.showChart = true
        if (this.lineChart) {
          const new_data = newVal.map((item) => {
            console.log(item[this.viewType], '>>>>>>>>>>>>item[this.viewType] * 1')
            this.totalNum += item[this.viewType == 'percent' ? 'num' : 'member_num'] * 1
            return { ...item, label: item.title + `${item.app_type ? '(' + (item.app_type == 1 ? '微信' : '抖音') + ')' : ''}` + `${item.playlet_id ? '/' + item.playlet_id : ' '}`, percent: Number(item.num), value: Number(item.member_num) }
          })
          console.log(newVal, "''>>>>>>>>>>>>>>>>>>>>pienewVal")
          this.lineChart.changeData(new_data)
        } else {
          this.initChart()
        }
      } else {
        this.showChart = false
      }
    }
  },
  mounted() {
    // this.chartResize()
  },
  methods: {
    formatNumber(data) {
      return numberFormatThousandthPercentile(data)
    },
    formatNumber1(data) {
      return numFormat(data + '')
    },
    initChart() {
      this.totalNum = 0
      const data = this.chartData.map((item) => {
        console.log(item[this.viewType], '>>>>>>>>>>>>item[this.viewType] * 1')
        this.totalNum += item[this.viewType == 'percent' ? 'num' : 'member_num'] * 1
        return { label: item.title + `${item.app_type ? '(' + (item.app_type == 1 ? '微信' : '抖音') + ')' : ''}` + `${item.playlet_id ? '/' + item.playlet_id : ' '}`, percent: Number(item.num), value: Number(item.member_num) }
      })

      if (this.lineChart) {
        this.lineChart.destroy()
        this.lineChart = null
      }
      console.log(data, '>>>>>>>>>>>>>>>>>>>>>>>.Piedata')
      const charts = new Pie('containerColumn_' + this.idIndex, {
        appendPadding: 10,
        height: 300,
        data,
        angleField: this.viewType,
        colorField: 'label',
        radius: 0.8,
        label: {
          type: 'spider',
          labelHeight: 28,
          content: '{name}({value})\n{percentage}'
        },
        legend: false,
        theme: {
          pie: {
            label: {
              offset: 0 // 标签的偏移量，0 表示居中
            },

            // 设置饼图的样式
            innerRadius: 0.5 // 设置内半径，0.5 表示饼图的中心有一个圆环
          }
        },
        style: {
          // 设置图表的位置
          pos: 'center' // 设置饼图居中
        },
        interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
        tooltip: {
          formatter: (datum) => {
            console.log(datum[this.viewType], this.totalNum, '>>>>>>>>>>>datum')
            const num = ((datum[this.viewType] / this.totalNum) * 100).toFixed(2)

            // data.map((item)=> {
            //   allNum += item.
            // })
            return { name: datum.label, value: num + '%' }
          }
        }
      })
      charts.render()
      this.lineChart = charts
    }
  }
}
</script>
<style lang="scss" scoped>
</style>